<template>
  <!-- 地图第一级展示 -->
  <div class="map3DBox" id="leader3DMapBox" ref="mapComponentRef"></div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import echarts from "@/common/utils/echarts.js";
import chengdu from "../../utils/chengdu.json";

// 页面数据源 - 从父组件接收的数据
const getFatherData = ref(null);

// 折线点的标记图
const piontMarkImgUrl = require("@/assets/screenImg/leaderImg/pointLine.png");
const mapBgImgUrl = new Image();
mapBgImgUrl.src = require("@/assets/screenImg/commonImg/mapBg.jpg");

// 定义向父组件传值方法
const emits = defineEmits(["nextMap"]);

// 在父组件调用
const init3DMap = (getMapData) => {
  console.log("子组件接受到数据：", getMapData);
  getFatherData.value = getMapData;
  const mapElement = document.getElementById("leader3DMapBox");
  const map3DChart = echarts.init(mapElement);
  echarts.registerMap("chengdu", chengdu);

  // 点击跳转高新区地图
  map3DChart.on("click", () => {
    // 步骤条跳转
    emits("nextMap", "GoGaoxinMap");
  });

  // const mapOptions2 = {
  //   backgroundColor: "#191d33", // 整体背景颜色
  //   color: ["#D4EDF2", "#00BDFE", "#FACA32"],
  //   geo: [
  //     {
  //       map: "chengdu",
  //       aspectScale: 1.1, // 地图的长款比
  //       roam: false, //是否允许缩放
  //       zoom: 1.1, //默认显示级别
  //       layoutSize: "100%",
  //       layoutCenter: ["50%", "52%"],
  //       itemStyle: {
  //         areaColor: "rgba(255,255,255,0)",
  //         borderColor: "#329BF5",
  //         borderWidth: 1,
  //       },
  //       silent: true,
  //     },
  //     {
  //       map: "chengdu",
  //       aspectScale: 1.1,
  //       roam: false,
  //       zoom: 1.1,
  //       layoutSize: "100%",
  //       layoutCenter: ["50%", "50%"],
  //       itemStyle: {
  //         areaColor: {
  //           type: "radial",
  //           x: 0.7,
  //           y: 0.5,
  //           r: 0.4,
  //           colorStops: [
  //             {
  //               offset: 0,
  //               color: "#56CCFB", // 0% 处的颜色
  //             },
  //             {
  //               offset: 1,
  //               color: "#0160AD", // 100% 处的颜色
  //             },
  //           ],
  //           global: false, // 缺省为 false
  //         },
  //         borderColor: "#37C1FD",
  //         borderWidth: 2,
  //         //选中效果
  //         emphasis: {
  //           areaColor: "#0160AD", // hover效果
  //         },
  //       },
  //       silent: false,
  //     },
  //   ],
  //   tooltip: {
  //     trigger: "item",
  //   },

  //   //配置属性
  //   series: [
  //     // {
  //     //   name: "0~100人",
  //     //   type: "map",
  //     //   roam: false,
  //     //   geoIndex: 0,
  //     //   label: {
  //     //     normal: {
  //     //       show: false, //省份名称,
  //     //     },
  //     //     emphasis: {
  //     //       show: true,
  //     //     },
  //     //   },
  //     //   data: [
  //     //     // { name: "惠城区", value: 0, },
  //     //     // { name: "惠阳区", value: 0, },
  //     //     // { name: "博罗县", value: 0, },
  //     //     // { name: "惠东县", value: 0, },
  //     //     // { name: "龙门县", value: 100, }
  //     //   ],
  //     // },
  //     // {
  //     //   type: "scatter",
  //     //   coordinateSystem: "geo",
  //     //   name: "龙门县何花仙街道黄灿麻社aaaaaaa",
  //     //   geoIndex: 0,
  //     //   label: {
  //     //     show: false,
  //     //     distance: 6,
  //     //     zlevel: 5,
  //     //     position: "top",
  //     //   },
  //     //   symbol: `image://${piontMarkImgUrl}`,
  //     //   silent: false,
  //     //   // data: [{ name: '惠州', value: [114.46517944335938, 23.078468383398807], }],
  //     //   markPoint: {
  //     //     symbol: `image://${piontMarkImgUrl}`,
  //     //     symbolSize: 10, //设置标记点的大小
  //     //     // symbolSize: [ratio(10), ratio(12)],
  //     //     label: {
  //     //       // 标记点title
  //     //       position: "top",
  //     //       color: "yellow",
  //     //     },
  //     //     data: [
  //     //       // {
  //     //       //   name: "服务项目：健康、养老、安服务居民：2，265人",
  //     //       //   coord: [114.46517944335938, 23.078468383398807],
  //     //       //   value: "78",
  //     //       // },
  //     //       // {
  //     //       //   name: "服务项目：健康、养老、安服务居民：2，265人",
  //     //       //   coord: [114.62954, 22.927912],
  //     //       //   value: "78",
  //     //       // },
  //     //     ],
  //     //     zlevel: 3,
  //     //     silent: false,
  //     //   },
  //     // },
  //   ],
  // };

  // 地图相关数据
  const mapDataState = reactive({
    gaoxinGeoCoordMap: {
      成都市: [104.066, 30.663],
      桂溪街道: [104.07749, 30.56267],
      中和街道: [104.08898, 30.52954],
      西园街道: [103.96787, 30.74817],
    },
    // 飞线点
    gaoxinDataArr: [
      [
        {
          name: "成都市",
          value: 0, // 控制聚合点的大小
        },
      ],
      [
        {
          name: "桂溪街道",
          value: 1,
        },
      ],
      [
        {
          name: "中和街道",
          value: 1,
        },
      ],
      [
        {
          name: "西园街道",
          value: 1,
        },
      ],
    ],
    // 地图配置项中的series数据
    mapSeriesArr: [],
  });

  /*定义起始点[]，用于绘制飞线
  @param: 飞线点[] 
  @return: []
  */
  const convertData = (data) => {
    let resultDataArr = [];
    for (let i = 0; i < data.length; i++) {
      let dataItem = data[i];
      let fromCoord = [104.066, 30.663]; //起始点地理坐标 - 成都市
      let toCoord = mapDataState.gaoxinGeoCoordMap[dataItem[0].name];
      if (fromCoord && toCoord) {
        resultDataArr.push([
          {
            // 起始点不需要value
            coord: fromCoord,
          },
          {
            coord: toCoord,
            value: dataItem[0].value,
          },
        ]);
      }
    }
    return resultDataArr;
  };

  // 遍历生成地图配置项中 series[] 所需的数据格式
  [["成都市", mapDataState.gaoxinDataArr]].forEach(function (item, i) {
    mapDataState.mapSeriesArr.push(
      {
        // 飞线配置
        type: "lines",
        zlevel: 2,
        effect: {
          show: true,
          period: 4, //箭头指向速度，值越小速度越快
          trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
          symbol: "arrow", //箭头图标
          symbolSize: 5, //图标大小
        },
        lineStyle: {
          color: "#36e3e3",
          width: 1, //尾迹线条宽度
          opacity: 1, //尾迹线条透明度
          curveness: 0.3, //尾迹线条曲直度
        },
        data: convertData(item[1]),
      },
      {
        //涟漪特效配置
        type: "effectScatter",
        coordinateSystem: "geo",
        zlevel: 2,
        rippleEffect: {
          period: 4, //动画时间，值越小速度越快
          brushType: "stroke", //波纹绘制方式
          scale: 4, //波纹圆环最大限制，值越大波纹越大
        },
        label: {
          show: true,
          position: "right", //显示位置
          offset: [10, 0], //偏移设置
          color: "#ffc872",
          fontFamily: "Microsoft YaHei",
          fontSize: 14,
          formatter: function (params) {
            //圆环显示文字
            return params.data.name;
          },
        },
        symbol: "circle",
        symbolSize: function (val) {
          return 7 + val[2] * 5; //圆环大小
        },
        itemStyle: {
          color: "#4092f7", // 圆环颜色
        },
        data: item[1].map(function (dataItem) {
          return {
            //在这里定义你所要展示的数据
            name: dataItem[0].name,
            // 格式如： [104.066, 30.663, 1]
            value: mapDataState.gaoxinGeoCoordMap[dataItem[0].name].concat([
              dataItem[0].value,
            ]),
          };
        }),
      }
      //中心点
      // {
      //   type: "scatter",
      //   coordinateSystem: "geo",
      //   zlevel: 2,
      //   rippleEffect: {
      //     period: 4,
      //     brushType: "stroke",
      //     scale: 4,
      //   },
      //   symbol: "pin",
      //   symbolSize: 500,
      //   label: {
      //     show: true,
      //     position: "right",
      //     // color: "#36e3e3",
      //     formatter: "{b}",
      //   },
      //   // data: [
      //   //   {
      //   //     name: "成都市",
      //   //     value: '3',
      //   //   },
      //   // ],
      // }
    );
  });

  // 地图配置项
  const mapOptions = {
    geo: {
      map: "chengdu",
      zoom: 2.5,
      // label: {
      //   show: true, // 每个区标题默认显示
      //   color: "#516a89",
      // },
      roam: true, //是否允许缩放。如果是立体图，不建议缩放
      itemStyle: {
        borderColor: "#516a89", //边界线
        borderWidth: 1,
        shadowColor: "rgba(51, 69, 89, .8)",
        shadowBlur: 10,
        areaColor: {
          // 纹理填充
          image: mapBgImgUrl, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
          repeat: "repeat", // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
        },
      },
      emphasis: {
        focus: "self", // 移入仅显示当前区域
        label: {
          show: true,
          color: "#36e3e3", //文字颜色
          backgroundColor: "transparent",
        },
        itemStyle: {
          opacity: 0.5,
          color: "#71a4da", // 移入背景色
        },
      },
    },
    series: mapDataState.mapSeriesArr,
  };
  map3DChart.setOption(mapOptions);
  return map3DChart;
};

defineExpose({ init3DMap });
</script>

<style lang="scss" scoped>
.map3DBox {
  width: 100%;
  height: 100%;
}
</style>
